import { Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import ScrollPageView from 'components/ScrollPageView';
import Placeholder from 'components/Placeholder'
import Card from 'components/Card'
import Ad from 'components/Ad'
import s from './index.module.scss'
import { memo, useState } from 'react';
import ListRow from 'components/ListRow';
import { UserInfo, userTypeDesc, defaultUserInfo} from './api'
import Icon from "../../../components/Icon";
import {navigateToAlbum} from "../Album/items/AlbumCard";

interface MiniappProps {
  selected: boolean,
  initialize: true
}

const genderText = {
  0: '男',
  1: '女'
}

// miniapp album_id: 8d1a732f663461d60027187a544d13a3
function Miniapp(props: MiniappProps) {  
  if (!props.initialize) {
    return <view></view>
  }

  const __userInfo = Taro.getStorageSync('userInfo');
  const init = __userInfo && __userInfo._id ? __userInfo : defaultUserInfo
  const [userInfo] = useState<UserInfo>(init)

  const _view = {
    display: props.selected ? 'block' : 'none'
  }

  // var __getUserInfo = (res) => {
  //   let result = res.detail;
  //   if (result && result.userInfo) {
  //     Taro.showLoading({title: '登录中...'})
  //     registerApi(result.userInfo).then(res => {
  //       Taro.setStorageSync('userInfo', res.data);
  //       setUserInfo(res.data);
  //       Taro.hideLoading()
  //     }).catch(error => {
  //       Taro.showToast({
  //         title: error.message,
  //         icon: 'error'
  //       })
  //       Taro.hideLoading()
  //     })
  //   }
  // }

  function clickCopy() {
    const nickName = userInfo.nickName
    if (!nickName) {
      return Taro.showToast({
        title: '没有昵称',
        icon: 'error'
      })
    }
    Taro.setClipboardData({
      data: nickName,
      success: (res) => {
        console.log(res)
      }
    })
  }

  function __clearCache() {
    Taro.clearStorageSync()
    Taro.showToast({
      title: '清除成功',
      icon: 'success'
    })
  }
  
  return (
    <ScrollPageView
      scrollViewStyle={{backgroundColor: '#FFF'}}
      navigationBarStyle={{backgroundColor: '#FFF'}}
      style={_view}
      isHeaderPlaceholder
    >
      <Card className={s.top}>
        <div className={s.card}>
          <div>
            <div className={s.username}>{userInfo.nickName}</div>
            <div className={s.time}>@{new Date().getFullYear()}</div>
          </div>
          <Button id={s.copybtn} size='mini' onClick={clickCopy}>
            <Icon name="rect_66" style={{marginRight: '4px'}} size={18} />
            复制昵称
          </Button>
        </div>
      </Card>

      <Card innerStyle={{padding: 0}}>
        <ListRow title='您的区域' description={userInfo.province || '中国'} underLine />
        <ListRow title='您的类型' description={userTypeDesc[userInfo.type || 3]} />
        <ListRow title='性别' description={typeof userInfo.gender === 'undefined' ? '未知' : genderText[userInfo.gender]} />
      </Card>

      <Card innerStyle={{padding: '3px'}}>
        <Ad />
      </Card>

      <Card innerStyle={{padding: 0}}>
        <ListRow title='清除缓存' description='清除所有缓存' onClick={__clearCache} underLine />
        <ListRow
          title='小程序实战'
          description="项目亮点多"
          onClick={() => {
            navigateToAlbum('微信小程序实战', '8d1a732f663461d60027187a544d13a3')
          }}
          underLine
        />

        <ListRow
          title='已付费合集'
          description="高效学习"
          onClick={() => {
            Taro.showToast({ title: '暂未开放', icon: 'error' })
          }}
        />
      </Card>

      <Placeholder type='wholeTabbar' />
    </ScrollPageView>
  )
}

export default memo(Miniapp);
